<template>
  <div class="career-info">
    <div class="heading">
      <div class="title">职业资讯</div>
      <div class="info">伴你成就非凡人生</div>
    </div>

    <div class="economy">
      <div class="name">
        <div class="flex">
          <div class="icon">
            <img src alt />
          </div>
          <div class="title">金融动态</div>
        </div>
        <van-icon name="arrow" color="#999999" size="20" />
      </div>

      <div class="content">
        <row-image
          v-for="item in economyInfo"
          :key="item.id"
          :cover="item.cover"
          :title="item.title"
          :time="item.time"
          :number="item.number"
        />
      </div>
    </div>

    <div class="internet">
      <div class="name">
        <div class="flex">
          <div class="icon">
            <img src alt />
          </div>
          <div class="title">互联网动态</div>
        </div>
        <van-icon name="arrow" color="#999999" size="20" />
      </div>

      <div class="content">
        <row-image
          v-for="item in internetInfo"
          :key="item.id"
          :cover="item.cover"
          :title="item.title"
          :time="item.time"
          :number="item.number"
        />
      </div>
    </div>
  </div>
</template>

<script>
import RowImage from '@/components/Info/RowImage'

const defaultInfo = [
  {
    id: 0,
    cover: '',
    title: '央行再次降息，来看看利好哪些行业',
    time: '04-15 11:06',
    number: '3800'
  },
  {
    id: 1,
    cover: '',
    title: '央行再次降息，来看看利好哪些行业',
    time: '04-15 11:06',
    number: '3800'
  },
  {
    id: 2,
    cover: '',
    title: '央行再次降息，来看看利好哪些行业',
    time: '04-15 11:06',
    number: '3800'
  }
]

export default {
  components: {
    RowImage
  },

  data() {
    return {
      economyInfo: defaultInfo,
      internetInfo: defaultInfo
    }
  }
}
</script>

<style lang="less" scoped>
.career-info {
  margin: 0 17px;

  .heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 17px;
    margin-bottom: 16px;

    .title {
      font-size: 18px;
      color: #222222;
      font-weight: 500;
    }

    .info {
      font-size: 13px;
      color: #999999;
    }
  }

  .economy,
  .internet {
    margin-bottom: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);

    .name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18.5px 13px;
      padding-bottom: 0;

      div {
        align-items: center;
      }

      .icon {
        width: 18px;
        height: 18px;
        margin-right: 4px;
      }

      .title {
        font-size: 16px;
        color: #222222;
        font-weight: 500;
      }
    }

    .content {
      margin-top: 15px;
    }
  }
}
</style>